<template>
	<el-card id="rich-editor">
		<vue-tinymce v-model="content" :setting="setting" :setup="setup" />
	</el-card>
</template>

<script>
import "common/tinymces/libs/zh_CN"; //引入tinymce中文
import "common/tinymces/libs/plugins"; //引入插件

export default {
	name: "RichEditor",
	props: {
		value: {
			type: String,
			default: ""
		},
		standard: {
			type: Boolean,
			default: true
		},
		height: {
			type: Number,
			default: 320
		},
		plugins: {
			type: [String, Array],
			default: "link lists image code table wordcount advlist"
		},
		toolbar: {
			type: [String, Array],
			default: "undo redo restoredraft | cut copy paste pastetext | bold italic underline strikethrough link anchor code | alignleft aligncenter alignright \
			alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | forecolor backcolor bullist numlist | blockquote subscript \
			superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight \
			formatpainter axupimgs wordlimit clear"
		}
	},
	data() {
		return {
			content: "",
			setting: {},
			editor: {}
		};
	},
	created() {
		this.initToolBar();
	},
	methods: {
		initToolBar() {
			const fontsize_formats = "12px 14px 16px 18px 24px 36px 48px 56px 72px";
			const font_formats = "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;" +
				"仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;" +
				"Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;" +
				"Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;" +
				"知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;" +
				"小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif";
			const standard = {
				placeholder: "在这里输入文字",
				//skin:'oxide-dark',
				language_url: "@/common/tinymces/libs/zh_CN.js",
				language: "zh_CN",//注意大小写
				theme: "silver", //主题
				height: this.height, //编辑器高度
				auto_focus: true,
				menubar: true,
				plugins: this.plugins, //插件
				toolbar_mode: "wrap",
				toolbar: this.toolbar,
				toolbar_sticky: true,
				fontsize_formats: fontsize_formats,
				font_formats: font_formats,
				browser_spellcheck: true,
				branding: true,
				statusbar: true,
				elementpath: true,
				paste_data_images: true,
				importcss_append: true,
				contextmenu: "bold copy clear"
			};
			const global = Object.assign({}, standard, {
				plugins: this.tinymces,
				link_list: [
					{title: "预置链接1", value: "http://www.tinymce.com"},
					{title: "预置链接2", value: "http://tinymce.ax-z.cn"}
				],
				image_list: [
					{title: "预置图片1", value: "https://www.tiny.cloud/images/glyph-tinymce@2x.png"},
					{title: "预置图片2", value: "https://www.baidu.com/img/bd_logo1.png"}
				],
				image_class_list: [
					{title: "None", value: ""},
					{title: "Some class", value: "class-name"}
				],
				importcss_append: true,
				//自定义文件选择器的回调内容
				file_picker_callback: this.filePicker,
				autosave_ask_before_unload: false,
				images_upload_handler: this.imageUpload
			});
			if (this.standard) {
				this.setting = standard;
			} else {
				this.setting = global;
			}
		},
		setup(editor) {
			editor.on("init", () => {
				editor.getBody().style.fontSize = "16px";
				editor.getBody().style.fontFamily = "微软雅黑";
			});
			// 注册一个icon
			editor.ui.registry.addIcon(
				"icon-delete",
				"<svg width='24' height='24'><path d='M16 7h3a1 1 0 010 2h-1v9a3 3 0 01-3 3H9a3 3 0 01-3-3V9H5a1 1 0 110-2h3V6a3 3 0 013-3h2a3 3 0 013 " +
				"3v1zm-2 0V6c0-.6-.4-1-1-1h-2a1 1 0 00-1 1v1h4zm2 2H8v9c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V9zm-7 3a1 1 0 012 0v4a1 1 0 01-2 0v-4zm4 0a1 1 0 012 0v4a1 " +
				"1 0 01-2 0v-4z' fill-rule='nonzero'/></svg>"
			);
			// 注册一个自定义的按钮
			editor.ui.registry.addButton("clear", {
				icon: `icon-delete`,
				onAction: () => {
					this.clear();
					editor.setContent("");
				}
			});
			this.editor = editor;
		},
		clear() {
			this.content = "";
		},
		filePicker(callback, value, meta) {
			if (meta.filetype === "file") {
				callback("https://www.baidu.com/img/bd_logo1.png", {text: "My text"});
			}
			if (meta.filetype === "image") {
				callback("https://www.baidu.com/img/bd_logo1.png", {alt: "My alt text"});
			}
			if (meta.filetype === "media") {
				callback("movie.mp4", {source2: "alt.ogg", poster: "https://www.baidu.com/img/bd_logo1.png"});
			}
		},
		imageUpload(blobInfo, success, failure) {
			this.$emit("handleImgUpload", blobInfo, success, failure);
		}
	},
	watch: {
		value(newValue) {
			this.content = newValue;
		},
		content() {
			this.$emit("input", this.content);
		}
	}
};
</script>

<style scoped>
#rich-editor {
	background-color: #F5F5F5;
}

>>> .tox-menubar {
	height: calc(4.2vh);
}

>>> .tox .tox-mbtn {
	height: calc(4.2vh - 5px);
}

>>> .tox-toolbar {
	height: calc(8.4vh);
}

>>> .tox-editor-header svg {
	width: 24px;
	height: 24px;
	margin: 0;
}

>>> .tox-tbtn__select-chevron svg {
	width: 16px;
	height: 12px;
}

>>> .tox-split-button__chevron svg {
	width: 16px;
	height: 12px;
}
</style>
